<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>酒店订单管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">

  <div th:replace="/common/header :: header"></div>

  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="/common/aside :: aside"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="row">
        <div class="col-md-6">
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li class="active"></li>
          </ol>
        </div>
      </div>

    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">酒店订单管理</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="mytable" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>预定用户</th>
                  <th>城市</th>
                  <th>酒店名称</th>
                  <th>订单状态</th>
                  <th>入住时间</th>
                  <th>预定时间</th>
                  <th>支付状态</th>
                  <th>支付金额</th>
                  <th>Operation</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="hisorder:${hisOrder}">
                  <td th:text="${hisorder.userName}"></td>
                  <td th:text="${hisorder.cityName}"></td>
                  <td th:text="${hisorder.hotelName}"></td>
                  <td th:text="${hisorder.orderStatus}"></td>
                  <td th:text="${#dates.format(hisorder.orderInTime,'yyyy/MM/dd HH:mm:ss')}"></td>
                  <td th:text="${#dates.format(hisorder.orderTime,'yyyy/MM/dd HH:mm:ss')}"></td>
                  <td th:text="${hisorder.orderPayStatus}"></td>
                  <td th:text="${hisorder.orderPayMoney}"></td>
                  <td>
                    <a  th:data-id="${hisorder.orderId}" data-opt="del" class=" del">
                      <button class="btn-sm btn-danger btn-flat" >删除</button>
                    </a>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <div th:replace="/common/footer :: footer"></div>


</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<!-- page script -->
<script>
    $(function () {
        $('#mytable').DataTable({
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search":"快速检索: ",
                "oPaginate": {
                    "sPrevious": "上页",
                    "sNext": "下页"
                }
            }

        })


        layui.use('layer', function () {
            var $ = layui.jquery;
            // 删除操作
            $('.content').on('click', 'a.del', function () {
                var id = $(this).data('id');// 获取点击项的id
                layer.confirm('您确定要删除这条数据吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function (index) {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: 'post',
                        url: '/order/delOrder?id='+id,
                        success: function () {
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        },
                        error: function () {
                            location.reload();
                        }
                    })

                });
            })
        })

    })
</script>
</body>
</html>
